/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view v-if="returnInfo">
		<view class="order-mes">
		    <view class="order-name">
		        <view>订单编号：{{returnInfo.order_sn}}</view>
		        <view>申请时间：{{returnInfo.add_time_format}}</view>
		    </view>
		    <button class="apply-btn" :hidden="!(returnInfo.status==2&&returnInfo.type==1)" @tap="receiveOrder">确定收货</button>
		    <button class="apply-btn" :hidden="!(returnInfo.status!=-2&&returnInfo.status<1)" @tap="cancelReturn">取消服务</button>
		</view>
		<view class="progress-desc">审核进度：
		    {{returnInfo.status==-2?'尊敬的客户，您的服务单已取消，感谢您对'+platformName+'的大力支持':''}}
		    {{returnInfo.status==-1?returnInfo.remark:''}}
		    {{returnInfo.status==0?'亲爱的客户，您的服务单已经提交成功，请您耐心等待'+store_name+'客服审核':''}}
		    {{returnInfo.status==1?'尊敬的客户，很抱歉出现这样的情况，如情况属实且非人为因素造成损坏，我们可以为您办理。请将商品全套及发票原件自行返回，如属商品质量问题，运费会以余额方式返还到您的商城账户；如非质量问题（误购），运费将由您承担(拒收到付），寄回商品时请附上您的订单号及收货人姓名电话、发货单详情（运单号、快递公司、快递费用），以便我们在收到返回商品时及时为您处理，感谢您的支持，谢谢！':''}}
		    {{returnInfo.status==2?'尊敬的客户，您的快递已寄出，等待卖家'+store_name+'收货':''}}
		    {{returnInfo.status==3?'尊敬的客户，'+store_name+'已收到您的快递，正在处理您的服务单':''}}
		    {{returnInfo.status==4||returnInfo.status==5?'尊敬的客户，您的服务单已完成，感谢您对'+platformName+'的大力支持':''}}
		    {{returnInfo.status==6?'尊敬的客户，您的服务单已申请仲裁，请在交易纠纷记录中查看':''}}
		</view>
		<view class="progress-bar-list">
			<progressBar check noline title="" state="提交申请" ></progressBar>
			<block v-if="returnInfo.status<=0">
				<progressBar   check  :title="returnInfo.status==0?'待审核':''" state="商城审核" ></progressBar>
			</block> 
			<block v-if="returnInfo.status==2">
				<progressBar   check  title="已取消" state="服务单已取消" ></progressBar>
			</block>
			<block v-else-if="returnInfo.status==1">
				<progressBar   check  title="" state="审核不通过" ></progressBar>
			</block>
			 <block v-else-if="returnInfo.status<6">
				<block v-if="returnInfo.type<2">
					<block v-if="returnInfo.status>=1">
						<progressBar   check  :title="returnInfo.status==1?'待退款':''" state="审核通过" ></progressBar>
					</block>
					<block v-if="returnInfo.type==1">
						<progressBar   :check="returnInfo.status>=2"  :title="returnInfo.status==2?'待买家收货':''" state="用户已发货" ></progressBar>
						<progressBar   :check="returnInfo.status>=3"  :title="returnInfo.status==3?'待退款':''" state="卖家已收货" ></progressBar>
						
					</block>
					<progressBar   :check="returnInfo.status==5"  :title="returnInfo.status==5?'已完成':''" state="完成退款" ></progressBar>
					 
				</block>
				<block v-else>
					<progressBar v-if="returnInfo.status>=1"   check  :title="returnInfo.status==1?'用户发货':''" state="审核通过" ></progressBar>
					<progressBar    :check="returnInfo.status>=2"  :title="returnInfo.status==2?'待卖家收货':''" state="用户已发货" ></progressBar>
					<progressBar    :check="returnInfo.status>=3"  :title="returnInfo.status==3?'已收货':''" state="卖家发货" ></progressBar>
					<progressBar    :check="returnInfo.status==4"  :title="returnInfo.status==4?'已完成':''" state="完成" ></progressBar>
				</block>
			</block>
			<block v-else>
				<progressBar   check  title="" state="审核不通过" ></progressBar>
				<progressBar    check  :title="returnInfo.status==5?'待平台仲裁':''" state="申请仲裁" ></progressBar>
				<progressBar    :check="returnInfo.status==6"  title="" state="完成交易纠纷" ></progressBar>
			</block>
		</view>
		
		<view class="apply-mes pd-bg-fff">
		    <view class="apply-item">
		        <view class="apply-til">售后信息</view>
		        <view v-if="returnInfo.status==-2">
					{{status_name[0]}}
				</view>
				<view v-if="returnInfo.status==-1">
					{{status_name[1]}}
				</view>
				<view v-if="returnInfo.status==0">
					{{status_name[2]}}
				</view>
				<view v-if="returnInfo.status==1">
					{{status_name[3]}}
				</view>
				<view v-if="returnInfo.status==2">
					{{status_name[4]}}
				</view>
				<view v-if="returnInfo.status==3">
					{{status_name[5]}}
				</view>
				<view v-if="returnInfo.status==4">
					{{status_name[6]}}
				</view>
				<view v-if="returnInfo.status==5">
					{{status_name[7]}}
				</view>
				<view v-if="returnInfo.status==6">
					{{status_name[8]}}
				</view>
		    </view>
		    <view class="apply-item">
		        <view class="apply-til">处理方式</view>
		        <view>期望处理方式“{{return_method[returnInfo.type]}}”</view>
		    </view>
		    <view class="apply-item">
		        <view class="apply-til">问题描述</view>
		        <view>{{returnInfo.reason}}</view>
		    </view>
		    <view class="apply-item">
		        <view class="apply-til">售后备注</view>
		        <view>{{returnInfo.remark}}</view>
		    </view>
		    <view class="img-title" v-if="returnInfo.imgs_url"><view>问题图片</view></view>
		    <view class="img-box" v-if="returnInfo.imgs_url">
		       <block  v-for="(item,index) in returnInfo.imgs_url" :key='index'>
				    <image :src="hostUrl+item" @tap="previewImgs" :data-idx="index" ></image>
			   </block>
		    </view>
		</view>
		<view class="notice">提示：为避免数据遗失或泄露，请您提前做好数据备份，商城将不承担相应责任。</view>
	</view>
</template>

<script>
	import {getReturnGoods,getStore,getTheGoods,putReturnStatus} from "@/api/api.js";
	import config from "@/api/config.js";
	import progressBar from "@/components/progress/progress.vue";
	import common from "@/common/common.js";
	export default {
		data() {
			return {
				hostUrl:config.host,
				platformName: '商城',
				returnInfo:"",
				status_name:["服务单取消","审核取消","待审核","审核通过","已发货","已收货","维修/换货完成","退款完成","仲裁中"],
				store_name:"",
				return_method:["仅退款","退货退款","换货","维修"],
				options:"",
			};
		},
		components:{progressBar},
		onLoad(options){
			console.log(options)
			this.options=options;
			this.getReturnGoods(options.id)
		},
		methods:{
			/*退换信息*/ 
			getReturnGoods(params){
				getReturnGoods(params).then(res=>{
					console.log(res)
					this.returnInfo=res;
					this.getStore(res.store_id)
				})
			},
			/*店铺*/
			getStore(params){
				getStore(params).then(res=>{
					console.log(res)
					this.store_name=res.store_name
				})
			},
			/*确认收货*/
			 receiveOrder(){
				  var that=this;
				 let params={
				 	order_sn:that.returnInfo.order_sn
				 }
				 uni.showModal({
					 title: '确定已收货？',
					 success: function (res) {
						 if (res.confirm) {
							 that.getTheGoods(params)
						 }
					 }
				 });
				
			 },
			 /*确认收货*/
			 getTheGoods(params){
			 	getTheGoods(params).then(res=>{
			 		console.log(res)
			 		if(res.status==1){
			 			this.getOrderPage(this.params)
			 		}
			 	})
			 },
			 cancelReturn(){
				 var that=this;
				 let params={
					 id:that.returnInfo.id
				 };
				 
				 uni.showModal({
					title: '确定取消售后服务？',
					success: function (res) {
						if (res.confirm) {
							that.putReturnStatus(params)
						}
					}
				});
				
			 },
			 /*取消退换货*/ 
			 putReturnStatus(params){
				putReturnStatus(params).then(res=>{
					if(res.status==1){
						common.toast("none","取消成功",3000)
						this.getReturnGoods(this.options.id)
					}else{
						common.toast("none",res.msg,3000)
					}
				}) 
			 },
			/*预览图片*/ 
			previewImgs(e){
				var that=this;
				var idx=e.currentTarget.dataset.idx;
				var imgs=that.returnInfo.imgs_url;
				imgs=imgs.map((item)=>{
					return that.hostUrl + item
				})
				uni.previewImage({
				  current: imgs[idx], /*是一个数组格式*/
				  urls: imgs
				});
			}
			 
		}
	}
</script>

<style lang="scss">
	/* return_goods_info.wxss */
	.order-mes{
	    padding:10rpx 30rpx;
	    background-color: #fff;
	}
	.order-mes .order-name{
	    height: 54rpx;
	    line-height: 54rpx;
	    font-size: 30rpx;
	    color: #666;
	    width: 500rpx;
	    display: inline-block;
	}
	.order-name view{
	    word-break: keep-all;
	    white-space: nowrap;
	    overflow: hidden;
	}
	.apply-btn{
	    width: 150rpx;
	    float: right;
	    margin-top: 20rpx;
	} 
	.goods-mes{
	    padding:10rpx 30rpx;
	    background-color: #fff;
	    display: flex;
	    justify-content: space-between;
	}
	.goods-pic{
	    width: 180rpx;
	    height: 180rpx;
	}
	.goods-des{
	    width: 490rpx;
	    font-size: 30rpx;
	}
	.goods-name{
	    width: 100%;
	    height: 30rpx;
	    color: #333;
	    line-height: 1;
	    margin-bottom: 20rpx;
	}
	.apply-mes{
	    padding:30rpx;
	}
	.apply-item{
	    display: flex;
	    height: 60rpx;
	    line-height: 60rpx;
	    font-size: 28rpx;
	    overflow: hidden;
	    color: #666;
	}
	.apply-til{
	    color: #333;
	    margin-right: 40rpx;
	}
	.apply-state{
	    margin-top: 20rpx;
	    background-color: #fff;
	    padding-left: 50rpx;
	    padding-top: 80rpx;
	}
	.img-title{
	    position: relative;
	    border-top: 1rpx solid #f3f3f3;
	    margin-top: 40rpx;
	    text-align: center;
	}
	.img-title view{
	    position: relative;
	    top: -28rpx;
	    font-size: 28rpx;
	    color: #666666;
	    display: inline;
	    background: white;
	    padding: 0 5rpx;
	}
	.img-box{
	    display: inline-block;
	}
	.img-box image{
	    height: 120rpx;
	    width: 120rpx;
	    padding: 8rpx;
	}
	.state-item{
	    border-left: 1px solid #f3f3f3;
	    padding-left: 40rpx;
	}
	.item-wrap{
	    position: relative;
	    margin-bottom:80rpx;
	    padding-bottom:50rpx;
	    border-bottom: 1px solid #f3f3f3;
	    font-size: 24rpx;
	    color: #aaa;
	    line-height: 1;
	}
	.item-wrap::before{
	    content: '';
	    position: absolute;
	    left:-61rpx;
	    top: 0;
	    width: 26rpx;
	    height: 26rpx;
	    border-radius: 50%;
	    background-color: #ff3b3b;
	    border:4px solid #ed8182;
	}
	.state-title{
	    font-size: 28rpx;
	    font-weight: bold;
	    color: #666;
	    padding-bottom:20rpx; 
	}
	.state-title view{
	    font-weight: normal;
	}
	.state-time{
	    padding-bottom: 20rpx;
	}
	.progress-desc{
	    border-top: 1px solid #f3f3f3;
	    padding: 30rpx;
	    background-color: #fff;
	    font-size: 28rpx;
	}
	/* 进度条 */
	.progress-bar-list{
	    width: 100%;
	    height:160rpx;
	    padding: 30rpx 0;
	    border-top: 1px solid #f3f3f3;
	    border-bottom: 1px solid #f3f3f3;
	    display: flex;
	    background-color: #fff;
	}
	.bar-item{
	    width: 150rpx;
	    height: 160rpx;
	    position: relative;
	}
	.tips-wrap{
	    height: 66rpx;
	}
	.bar-item .tips{
	    position: relative;
	    width: 108rpx;
	    height: 36rpx;
	    line-height: 36rpx;
	    text-align: center;
	    font-size: 24rpx;
	    color: #fff;
	    background-color: #50c65f;
	    border-radius: 18rpx;
	    margin:0 auto;
	}
	.bar-item .tips::before{
	    content: '';
	    position: absolute;
	    right: 35rpx;
	    bottom: -20rpx;
	    width: 0;
	    height: 0;
	    border: 10rpx solid transparent;
	    border-top-color: #50c65f;
	}
	.bar-ico{
	    width: 44rpx;
	    height: 44rpx; 
	    margin: 0 auto;
	}
	.bar-s{
	    display: none;
	}
	.bar-steps{
	    width: 100%;
	    text-align: center;
	    height: 50rpx;
	    line-height: 50rpx;
	    font-size:24rpx;
	    color: #ccc;
	}
	.line{
	    position: absolute;
	    top: 85rpx;
	    right: 114rpx;
	    width: 72rpx;
	    height: 6rpx;
	    background-color: #ccc;
	    border-radius: 3rpx;
	}
	.bar-check .bar-s{
	    display: block;
	}
	.bar-check .bar-f{
	    display: none;
	}
	.bar-check .bar-steps{
	    color: #50c65f;
	}
	.bar-check .line{
	    background-color: #50c65f;
	}
	.notice{
	    margin-top: 20rpx;
	    background-color: #fff;
	    font-size: 28rpx;
	    padding: 30rpx;
	}
	.inputs{
	    border:1rpx  solid #f3f3f3;
	    border-radius:5px;
	    font-size:24rpx;
	    padding:0 5px;
	    text-align: center;
	    float: right;
	    width: 150rpx;
	}
</style>
